<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-date"></i> 门店列表</el-breadcrumb-item>
                <el-breadcrumb-item>申请门店</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="searchitem">
                <el-input v-model="searchShopsText" placeholder="请输入店铺名称" clearable></el-input>
            </div>
            <div class="searchitem">
                <el-button type="primary"  @click="search()" v-loading.fullscreen.lock="fullscreenLoading">搜索</el-button>
            </div>
            <div style="float:right;">
                <el-button type="primary" @click='dlgNew = true'>申请店铺</el-button>
            </div>
            <el-table :data="shopList" style="width: 100%" border center :row-class-name="tableRowClassName">
                <el-table-column prop="name" label="店铺名称" align="center">
                </el-table-column>
                <el-table-column prop="address" label="店铺地址" align="center">
                </el-table-column>
                <el-table-column prop="phone" label="联系方式" align="center">
                </el-table-column>
                <el-table-column prop="desc" label="店铺介绍" align="center">
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    
                    <template slot-scope="scope"> 
                        <el-button   @click.native.prevent="deleteShops(scope.$index, shopList)"  type="text" size="small">
                            注销门店
                        </el-button>
                        <el-button  @click.native.prevent="updatas(scope.$index, shopList)"  type="text" size="small">
                            修改门店
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row style='margin-top:150px'>
                <el-col :span='24' style="text-align:center">
                    <el-pagination background :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
                        :total="200">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>

        <!-- 申请店铺 -->
        <el-dialog width='30%' title="申请店铺" :visible.sync="dlgNew" v-show="shows">
            <el-form ref="nameForm" label-width="100px">
                <el-form-item prop="username" label="店铺名称">
                    <el-input  v-model="shopName"  placeholder="名称" clearable></el-input>
                </el-form-item>
                <el-form-item prop="username" label="店铺地址">
                    <el-input v-model="shopAdress" placeholder="店铺地址" clearable></el-input>
                </el-form-item>
                <el-form-item prop="username" label="联系方式">
                    <el-input v-model="shopTell" placeholder="联系方式" clearable></el-input>
                </el-form-item>
              <el-form-item prop="username" label="店铺详情">
                    <el-input v-model="shopInformation" placeholder="店铺详情" clearable></el-input>
                </el-form-item>
            </el-form>
            <template slot="footer" class="dialog-footer">
                <el-button @click="add()"   type='primary' size="small">申请</el-button>
            </template>

        </el-dialog>

        <!--修改店铺-->
        <el-dialog width='30%' title="修改店铺信息" :visible.sync="dlgEdit">
            <el-form ref="nameForm" label-width="100px">
                <el-form-item prop="username" label="店铺名称">
                    <el-input  v-model="shopName" placeholder="店铺名称" clearable></el-input>
                </el-form-item>
                <el-form-item prop="username" label="店铺地址">
                    <el-input v-model="shopAdress" placeholder="店铺地址" clearable></el-input>
                </el-form-item>
                <el-form-item prop="username" label="联系方式">
                    <el-input v-model="shopTell" placeholder="联系方式" clearable></el-input>
                </el-form-item>
                <el-form-item prop="username" label="店铺详情">
                    <el-input v-model="shopInformation" placeholder="店铺详情" clearable></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button  @click="updataShops()" type='primary' size="small">修改</el-button>
            </div>
        </el-dialog>



    </div>
</template>


<script>
 
    import{createNamespacedHelpers} from 'vuex';
    import axios from "axios"
    const {mapState,mapActions,mapMutations} = createNamespacedHelpers("shopstore")

    export default {
        mounted(){
            this.getShops()
        
        },
        data: function () {
            return {
                shows:true,
                searchShops:'',
                dlgNew: false,
                dlgView: false,
                dlgEdit: false,
                currentPage: 1,
                fullscreenLoading: false,
                shopName:'',
                shopAdress:'',
                shopTell:"",
                shopInformation:"2017-02-24 17:40:50开店",
                shops_Id:'',
                searchShopsText:''
            }
        },
        computed:{
            ...mapState(["tableData","shopList"])
        },
        
        
        methods: {
        tableRowClassName({row, rowIndex}) {
        if (row.status === "申请中") {
          return 'applying-row';
        } else if (row.status === "已通过") {
          return 'success-row';
        }else {
            return 'waring-row'
        }
        ;
        },
              // 接收仓库数据
        ...mapActions(["addShops","updataShopsByid","getShops"]),
        ...mapMutations(["getShopsList"]),
            //注销门店
            deleteShops(index, rows) {
                console.log(index, rows[index]._id)
                this.$confirm('此操作将申请注销此店铺, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '申请已提交!'
                });
                axios
                // .post("/shops/deleteShopsById",{_id:rows[index]._id})
                .post("/shops/shopsDeleteApply",{_id:rows[index]._id,type:3,status:1})
                .then(res => {
                //    console.log("都22",res);
                   this.getShops()
                   })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '申请已取消'
                });
            });
        },

        // 搜索店铺
        search(){
            // console.log(this.shopList.shopId.name);
           
             this.shopList.map(item => {
                console.log(item.shopId.name);
                
            })
        },

        updatas(index,rows){
            // console.log(rows[index].shopId._id)
            this.shops_Id = rows[index]._id;
            this.dlgEdit = true
            },
        updataShops(){
            this.updataShopsByid({
                name:this.shopName,
                address:this.shopAdress,
                phone:this.shopTell,
                desc:this.shopInformation,
                _id:this.shops_Id
            })
            this.shopName='';
            this.shopAdress='';
            this.shopTell='';
            this.shopInformation='';
            this.dlgEdit = false;
            this.getShops()
        },
      
        //新增门店
        add(){
           this.addShops({
                    name:this.shopName,
                    address:this.shopAdress,
                    phone:this.shopTell,
                    desc:this.shopInformation,
                    type:2,
                    status:1
                })
            this.shopName='';
            this.shopAdress='';
            this.shopTell='';
            this.shopInformation='';
            this.dlgNew=false;
            this.getShops();
            } ,
        }
     
    }
     

</script>
<style scope>

.searchitem{
    display:inline-block;
    margin-bottom:10px;
}
.el-table .applying-row {
background: rgb(242, 243, 248);
color: rgb(150, 160, 247);
font-weight: bolder
}

.el-table .success-row {
background: #eff5f2;
color: rgb(5, 146, 0);
font-weight: bolder
}
.el-table .waring-row {
background: rgb(243, 237, 237);
color: rgb(241, 58, 58);
font-weight: bolder
}


</style>
